import { SetupContext, defineComponent } from 'vue'
import { InputEmit, InputProps, inputEmit, inputProps } from './input-types'
import { useNamespace } from '../shared/hooks/useNamespace'
import useInput from './hooks/use-input'

export default defineComponent({
  name: 'FsInput',
  props: inputProps,
  emits: inputEmit,
  setup(props: InputProps, ctx: SetupContext<InputEmit>) {
    const {
      type,
      width,
      textType,
      pwdType,
      isDisabled,
      isReadonly,
      rounded,
      placeholder,
      textInput,
      handleInput,
      handleFocus,
      handleBlur,
      handleChange,
      handleKeydown,
      changeType
    } = useInput(props, ctx)
    const ns = useNamespace('input')
    return () => {
      return (
        <div class={ns.b()} style={{ borderRadius: rounded.value, width: width.value }}>
          {ctx.slots.left?.()}
          <input
            class={ns.e('inner')}
            placeholder={placeholder.value}
            type={textType.value}
            disabled={isDisabled.value}
            readonly={isReadonly.value}
            value={textInput.value}
            onInput={handleInput}
            onFocus={handleFocus}
            onBlur={handleBlur}
            onChange={handleChange}
            onKeydown={handleKeydown}
          />
          {type.value === 'password' ? (
            <div class={ns.e('eyes')} onClick={changeType}>
              <i
                class={{
                  fa: true,
                  'fa-eye': pwdType.value === 'password',
                  'fa-eye-slash': pwdType.value === 'text'
                }}
              ></i>
            </div>
          ) : null}
          {ctx.slots.right?.()}
        </div>
      )
    }
  }
})
